<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">我的问题</view>
		</view>
		<view class="body">
			<view class="" v-for="item,index in questionlist" :key="index">
				<view class="chaseask" v-if="index==2">
					追问时间:{{item.time}}
				</view>
				<view class="body-piece">
					<view class="body-piece-headr">
						<view class="body-piece-headr-icon studentsvg"  v-if="item.type=='问'||item.type=='追问'"></view>
						<view class="body-piece-headr-icon teachersvg"  v-if="item.type=='答'||item.type=='追答'||item.type=='退回理由'"></view>
						<view class="body-piece-headr-name">{{item.name}}</view>
						<view class="body-piece-headr-studio" >{{item.studio}}</view>
						<view class="body-piece-footer">
							{{item.time}}
						</view>
						<view class="body-piece-change">
							<view class="changicon" v-if="item.text2.length>0"></view>
							<view class="" v-else></view>
						</view>
					</view>
					<view class="body-piece-body" v-if="item.bank">
						引用：
						<view class="" v-for="itemb,index in item.bank" :key="index">
							<view class="chaseask" v-if="index==2">
								追问时间:{{itemb.time}}
							</view>
							<view class="body-piece piece2">
								<view class="body-piece-headr">
									<view class="body-piece-headr-icon studentsvg"  v-if="itemb.type=='问'||itemb.type=='追问'"></view>
									<view class="body-piece-headr-icon teachersvg"  v-if="itemb.type=='答'||itemb.type=='追答'"></view>
									<view class="body-piece-headr-name">{{itemb.name}}</view>
									<view class="body-piece-headr-studio" >{{itemb.studio}}</view>
									<view class="body-piece-footer">
										{{itemb.time}}
									</view>
									<view class="body-piece-change">
										<view class="changicon" v-if="itemb.text2.length>0"></view>
										<view class="" v-else></view>
									</view>
								</view>
								<view class="body-piece-body" v-if="itemb.text2.length>0">
									<view class="decoration" v-for="item2,index2 in itemb.text2" :key="index2">{{itemb.type}}：{{item2}}</view>
									<view>{{itemb.type}}：{{itemb.text}}</view>
								</view>
								<view class="body-piece-body" v-else>
									{{itemb.type}}：{{itemb.text}}
								</view>
								<view class="body-piece-body"  v-if="itemb.picture&&itemb.picture.length>0">
									<!-- <img @click="preview(item3.p1)" v-for="item3,index3 in itemb.picture" :key="index3" class="body-piece-body-img" :src='item3.p2'> -->
									<el-image
									    style="width: 20vw; height: 20vw"
										v-for="item3,index3 in item.picture" 
										:key="index3"
									    :src="item3.p2"
									    :preview-src-list="[item3.p1]">
									</el-image>
								</view>
								<view class="body-piece-body" v-else></view>
								<view class="body-piece-body"  v-if="itemb.voice&&itemb.voice.length>0&&isrefresh"></view>
								<view class="body-piece-body" v-else></view>
							</view>
						</view>
					</view>
					<view class="body-piece-body" v-else-if="item.text2.length>0">
						<view class="decoration" v-for="item2,index2 in item.text2" :key="index2">{{item.type}}：{{item2}}</view>
						<view>{{item.type}}：{{item.text}}</view>
					</view>
					<view class="body-piece-body" v-else>
						{{item.type}}：{{item.text}}
					</view>
					<view class="body-piece-body"  v-if="item.picture&&item.picture.length>0">
						<!-- <img @click="preview(item3.p1)" v-for="item3,index3 in item.picture" :key="index3" class="body-piece-body-img" :src='item3.p2'> -->
						<el-image
						    style="width: 20vw; height: 20vw;margin: 3vw;"
							v-for="item3,index3 in item.picture" 
							:key="index3"
						    :src="item3.p2"
						    :preview-src-list="[item3.p1]">
						</el-image>
					</view>
					<view class="body-piece-body" v-else></view>
					<view class="body-piece-body"  v-if="item.voice&&item.voice.length>0&&isrefresh"></view>
					<view class="body-piece-body" v-else></view>
				</view>
			</view>
			<!-- v-if="$store.state.user.myquestion.state==1||$store.state.user.myquestion.state==6" -->
			<view class="questionclosely" v-if="$store.state.user.myquestion.state==1||$store.state.user.myquestion.state==6"  @click="closely()">追问</view>
			<button v-if="isrotate" class="rotatebutton" @click="rotate"></button>
		</view>
		<view class="footer">
			<view class="footer-button" v-if="isasked" @click="evaluationclick()">已了解并评价（{{time}}）</view>
			<view class="footer-button" v-else @click="returnclick()">返回</view>
		</view>
	</view>
</template>

<script>
	import { getEvaluateEvaluate } from "@/api/mine/index";
	import { Result } from "element-ui";
	import { handleImageUrl } from "@/utils/common"

	export default {
		data() {
			return {
				questionlist: [],
				time: '10:00',
				timer: null,
				isasked: false,
				innerAudioContext: null,
				isrefresh: true,
				isrotate: false,
				rotateAngle: 0,
				loading: false,
			}
		},
		// computed: {
		//    refresh() {
		//       return this.$store.state.user.refresh
		//    }
		// },
		watch: {
			// refresh: {
			// 	immediate: true,
			// 	handler: function(newval) {
			// 		console.log("newval",newval)
			// 		this.Initialize()
			// 	}
			// },
			time(i) {
				console.log("i",i)
				console.log("this.time",this.time)
				let data = this.$store.state.user.myquestion
				if(data.state!=1&&data.state!=6){
					this.isasked = false
				}
				if(this.time == '0:00'){
					this.isasked = false
				}
			}
		},
		mounted() {
			window.addEventListener('mouseup',this.handleonmousedown)
		},
		onShow() {
			this.Initialize()
		},
		created() {
		   
		},
		methods: {
			Initialize(){
				let time = this.$store.state.user.myquestion.lastAnswerTime
				this.isasked = false
				this.dealdata()
				let data = this.$store.state.user.myquestion
				if(data.state==1||data.state==6){
					this.isasked = true
				}
				if(time&&this.isasked){
					this.timeago(time)
				}
			},
			handleonmousedown(){
				if(!this.loading){
					this.isrotate = false
				}
			},
			rotate(){
				this.isrotate = true
				let tp = document.getElementsByClassName('image-view-img')[0]
				let angle = this.rotateAngle%4
				if(angle == 0){
					tp.style.transform = 'translate(-50%,-50%) rotate(90deg)'
				}else if(angle == 1){
					tp.style.transform = 'translate(-50%,-50%) rotate(180deg)'
				}else if(angle == 2){
					tp.style.transform = 'translate(-50%,-50%) rotate(270deg)'
				}else if(angle == 3){
					tp.style.transform = 'translate(-50%,-50%)'
				}
				this.rotateAngle+=1
				this.isrotate = true
			},
			voiceplay(data){
				// console.log("voiceplay",data)
				var innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.src = data
				innerAudioContext.play()
			},
			dealwidth(data){
				return 0
				// var innerAudioContext = uni.createInnerAudioContext()
				// innerAudioContext.src = data.url
				// innerAudioContext.onCanplay(()=>{
				//     var time = innerAudioContext.duration.toFixed(0)
				// 	console.log("time",time)
				// 	data.duration = time-0
				// 	return time
				// })
			},
			preview(imgUrl){
				this.$modal.loading("加载中，请耐心等待...")
				this.loading = true
				let that = this
				this.isrotate = true
				this.rotateAngle = 0
				let result
				window.URL = window.URL || window.webkitURL;
				var xhr = new XMLHttpRequest();
				xhr.open("get", imgUrl, true);
				xhr.responseType = "blob";
				xhr.onload = function(){
					that.loading = false
					that.$modal.closeLoading()
				    if(this.status == 200){
				        //得到一个blob对象
				        var blob = this.response;
				        // console.log("blob", blob)
				        // 至关重要
				        let oFileReader = new FileReader();
				        oFileReader.onloadend = function(e){
				            // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
							result = e.target.result
							uni.previewImage({
								current: 0,
								urls: [result],
							})
				        }
				        oFileReader.readAsDataURL(blob);
				    }
				}
				xhr.send();
			},
			dealpicture(data){
				let list=[]
				if(data!=""&&data!=null){
					list = data.split(';')
				}
				for(let i in list){
					let l = list[i].split('.')
					list[i] = {
						p1: handleImageUrl(list[i]),
						p2: handleImageUrl(list[i], '200x200')
					}
				}
				return list
			},
			dealdata(){
				// console.log("this.$store.state.user.baseUrl",this.$store.state.user.baseUrl)
				// console.log("this.$store.state.user.myquestion dealdata",this.$store.state.user.myquestion)
				//问
				this.questionlist=[]
				let data = this.$store.state.user.myquestion
				this.questionlist.push({
					name:  data.studentName, //学生名
					text: data.question, 
					text2: [], 
					time: data.questionTime, 
					type: '问', 
					studio: '',
					picture: this.dealpicture(data.questionPicture),
				})
				//答
				this.$store.state.user.teacherName = data.teacherName
				if(data.rejectReason){
					// console.log("data.rejectReason1",data.rejectReason)
					this.questionlist.push({
						name: data.teacherName, //教师名
						text: data.rejectReason, 
						text2: [], 
						time: '', 
						type: '退回理由', 
						studio: data.studioName ,//教师工作室
						picture: [],
					})
					return
				}
				let questionBank=data.questionBank
				let data2 = data.answerHistoryList
				let answer={},text2=[]
				
				if(data2&&data2.length){
					for(let i in data2){
						if(data2[i].delFlag==0){
							let bank = null
							if(data2[i].questionBankId){
								bank=[]
								bank.push({
									name: data.studentName, //教师名
									text: questionBank.question.replace(/\|\|\|\|\|\|/g,"|"), 
									text2: [], 
									time: data2[i].answerTime, 
									type: '问', 
									studio: '' ,//教师工作室
									picture: this.dealpicture(questionBank.questionPicture),
								})
								bank.push({
									name: data.teacherName, //教师名
									text: questionBank.wordAnswer.replace(/\|\|\|\|\|\|/g,"|"), 
									text2: [], 
									time: data2[i].createTime, 
									type: '答', 
									studio: data.studioName ,//教师工作室
									picture: this.dealpicture(questionBank.pictureAnswer),
								})
							}
							answer={
								name:  data.teacherName, //教师名
								text: data2[i].wordAnswer, 
								text2: [], 
								time: data2[i].answerTime, 
								type: '答', 
								studio: data.studioName ,//教师工作室
								picture: this.dealpicture(data2[i].pictureAnswer),
								bank: bank
							}
						}else{
							text2.push(data2[i].wordAnswer)
						}
					}
					answer.text2=text2
					this.questionlist.push(answer)
				}
				//追问
				let data3 = data.questionsCloselyList
				for(let i in data3){

					this.questionlist.push({
						name:  data.studentName, //学生名
						text: data3[i].question, 
						text2: [], 
						time: data3[i].questionTime, 
						type: '追问', 
						studio: '',
						picture: this.dealpicture(data3[i].questionPicture),
					})
					//追答
					let data2 = data3[i].answerCloselyHistoryList
					let answer={},text2=[]
					if(data2&&data2.length){
						for(let j in data2){
							if(data2[j].delFlag==0){
								answer={
									name:  data.teacherName, //教师名
									text: data2[j].wordAnswer, 
									text2: [], 
									time: data2[j].answerTime, 
									type: '追答', 
									studio: data.studioName ,//教师工作室
									picture: this.dealpicture(data2[j].pictureAnswer),
								}
							}else{
								text2.push(data2[j].wordAnswer)
							}
							
						}
						answer.text2=text2
						this.questionlist.push(answer)
					}
				}
				
				// console.log("this.questionlist",this.questionlist)
				this.isrefresh = false
				this.$nextTick(function (){
					for(let i in this.questionlist){
						// console.log("this.questionlist[i]",this.questionlist[i])
						if(this.questionlist[i].voice){
							for(let j in this.questionlist[i].voice){
								this.questionlist[i].voice[j].duration = this.dealwidth(this.questionlist[i].voice[j])
							}
						}
					}
					this.isrefresh = true
				})
				
			},
			returnclick(){
				this.$router.push('/pages/mine/index')
			},
			closely(){
				this.$router.push('/pages/mine/startask')
			},
			evaluationclick(){
				this.$router.push('/pages/mine/evaluation')
			},
			timeago(dateTimeStamp){
				dateTimeStamp = new Date(dateTimeStamp).getTime()
				let now = new Date().getTime()
				let time = (now - dateTimeStamp)/1000
				if(time<600){
					this.count(600-time)
				}
			},
			count(time){
				// console.log("time",time)
				//倒计时
				let maxtime = time
				let _this = this
				_this.timer = setInterval(countDown, 1000);     
				function countDown() {
					if (maxtime>= 0) {
						let minutes = Math.floor(maxtime / 60);
						let seconds = Math.floor(maxtime % 60);
						if(seconds<10){ seconds='0'+seconds }
						_this.time=minutes+':'+seconds
						--maxtime
					}else{
						clearInterval(_this.timer);
					}
				}
				
			},
			// refreshall(){
			// 	this.refresh = false
			// 	this.$nextTick(() => {
			// 		this.refresh = true
			// 	})
			// }
		},
		beforeDestroy() {
		    clearInterval(this.timer);        
		    this.timer = null;
		}
	}
</script>

<style>
	.container {
		font-size: 4vw;
		background-color: #F6F7F8;
		width: 100vw;
		/* height: 87.3vh; */
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw 1fr auto;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.chaseask{
		margin: 4vw auto 0 auto;
		width: 90%;
		height: auto;
		color: #B3B5B9;
		display: grid;
		align-items: center;
	}
	.body-piece{
		margin: 4vw auto 0 auto;
		padding: 0 0 3vw 0;
		width: 90%;
		min-height: 30vw;
		background: #ffffff;
		border-radius: 2vw;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-rows: 15vw auto auto;
	}
	.piece2{
		width: 110%;
		margin: 0 0 0 -5%;
		padding: none;
		transform: scale(0.9);
		background: rgb(245,246,248);
	}
	.body-piece-headr{
		margin: 0 0 0 3%;
		width: 90%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-columns: auto auto 1fr auto auto;
	}
	.body-piece-headr-icon{
		width: 8vw;
		height: 8vw;
	}
	.studentsvg{
		background: url(../../static/hot/student.svg);
		background-size: 100% 100%;
	}
	.teachersvg{
		background: url(../../static/hot/teacher.svg);
		background-size: 100% 100%;
	}
	.body-piece-headr-name{
		font-weight: 700;
		color: #363A44;
		width: 15vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.body-piece-headr-studio{
		
		color: #B3B5B9;
		width: 20vw;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	.body-piece-change{
		
	}
	.changicon{
		width: 5vw;
		height: 5vw;
		background: url(../../static/index/change.png);
		background-size: 100% 100%;
	}
	.body-piece-body{
		margin: 0 0 0 5%;
		width: 90%;
		color: #515257;
	}
	.body-piece-body-img{
		margin: 2vw;
		width: 20vw;
		height: 20vw;
	}
	.decoration{
		text-decoration: line-through
	}
	.questionclosely{
		float: right;
		margin: 5vw 5vw 0 0;
		width: 16vw;
		height: 8vw;
		border-radius: 4vw;
		color: #ffffff;
		background: #1492FF;
		display: grid;
		justify-items: center;
		align-items: center;
		cursor: pointer;
	}
	.body-piece-footer{
		display: grid;
		justify-items: end;
		align-items: center;
		width: 30vw;
		min-width: 35vw;
		color: #B3B5B9;
		font-size: 3.6vw;
	}
	.footer{
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
	}
	.footer-button{
		margin: 1vw 0 1vw 0;
		width: 95vw;
		height: 10vw;
		border-radius: 5vw;
		color: #ffffff;
		background: #00B578;
		display: grid;
		justify-items: center;
		align-items: center;
		cursor: pointer;
	}
	
	.voice-body-line{
		margin: 2vw 0;
		width: 87vw;
		height: 10vw;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: auto 1fr auto;
	}
	.voice-body-piece{
		padding: 0 2vw;
		height: 10vw;
		border-radius: 5vw;
		background: #DCEDFF;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-column-gap: 2vw;
		grid-template-columns: auto auto 1fr;
		cursor: pointer;
	}
	.voice-delete{
		float: right;
		width: 3vw;
		height: 3vw;
		background: url(../../static/index/delete.png);
		background-size: 100% 100%;
	}
	.recordicon{
		width: 5vw;
		height: 5vw;
		background: url(../../static/index/record.png);
		background-size: 100% 100%;
	}
	.rotatebutton{
		position: absolute;
		top: 3vw;
		left: 45vw;
		z-index: 99999;
		color: #ffffff;
		background: url(../../static/mine/redo.svg);
		background-size: 100% 100%;
		width: 6vw;
		height: 6vw;
		cursor: point;
	}
</style>